<template>
	<view class="tab-navigation">
		<NavHeader :title="title"></NavHeader>
		<view class="tabs-box">
			<z-tabs :list="tabs" :current="currentTab" class="tabs" active-color="#F22C1F" @change="tabChange"></z-tabs>
			<image class="tab-more" src="/static/tabs-more.png"></image>
		</view>
	</view>
</template>

<script>
	import NavHeader from '@/components/nacigation/NavHeader.vue';
	import ZTabs from '@/uni_modules/z-tabs/components/z-tabs/z-tabs.vue';

	export default {
		components: {
			NavHeader,
			ZTabs
		},
		props: {
			title: {
				type: String,
				default: '标题'
			},
			currentTab: {
				type: Number,
				default: 0
			},
			tabs:{
				type:Array,
				default:['广州市', '越秀区', '海珠区', '荔湾区', '天河区']
			}
		},
		emits: ['tabChange'],
		data() {
			return {
			}
		},
		methods: {
			tabChange(val) {
				this.$emit('tabChange', val); // 触发父组件事件
			}
		}
	};
</script>

<style scoped lang="scss">
	.tab-navigation {
		width: 100%;

		.tabs-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;

			.tabs {
				width: 100%;
			}

			.tab-more {
				width: 32rpx;
				height: 32rpx;
				padding-right: 32rpx;
			}
		}


	}
</style>